<template>
  <div style="text-align: left;width: 300px;margin-top: 20px;">
    <div>
      <van-image
          class="avatar"
          :src="user?.avatarUrl"
          fit="cover"
      />
    </div>
    <van-cell title="登录用户" :value="user?.username"/>
    <van-cell title="修改信息" is-link to="/user/update"/>
    <van-cell title="我的队伍" is-link to="/user/team"/>
    <van-cell title="退出登录" @click="logout"/>
  </div>
</template>
<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";

const router = useRouter();
name:'Index'
const user = ref()

const toEdit = (editKey, editName, currentVal) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentVal,
    }
  })
}
onMounted(async () => {
  user.value = await getCurrentUser();


})
const logout = () => {
  router.push({
    path: '/user/login',
    replace: true
  })

}
</script>
<style scoped>
.avatar {
  width: 300px; /* 设置头像宽度 */
  height: 300px; /* 设置头像高度 */
  border-radius: 50%; /* 设置圆角 */
  overflow: hidden; /* 隐藏超出圆角部分 */
}
</style>